<template>
  <div>
    <div class="topBox">
      <div class="landInfo1 boxSize">
        <div class="text">地块数量</div>
        <div class="statisticsArea">
          <div class="statisticsNum1">{{ landNum }} <span>个</span></div>
        </div>
      </div>
      <div class="landInfo2 boxSize">
        <div class="text">地块面积</div>
        <div class="statisticsArea">
          <div class="statisticsNum2">
            {{ landArea === null ? "0" : landArea }} <span>亩</span>
          </div>
        </div>
      </div>
      <div class="landBreed1 boxSize">
        <div class="text">种植品种数</div>
        <div class="statisticsArea">
          <div class="statisticsNum1">{{ Species }} <span>种</span></div>
        </div>
      </div>
      <div class="landBreed2 boxSize">
        <div class="text">种植面积</div>
        <div class="statisticsArea">
          <div class="statisticsNum2">{{ landPlant }} <span>亩</span></div>
        </div>
      </div>
    </div>
    <div class="map">
      <areaMap
        class="areaMap"
        :landData="landData"
        :plantData="plantData"
      ></areaMap>
    </div>
  </div>
</template>

<script>
import areaMap from '@/views/dashboard/components/map.vue'
import {
  getMaplandApi,
  getSpeciesStatisticsApi,
  getLandAreaStatisticsApi,
  getLandNumStatisticsApi,
  getLandPlantStatisticsApi
} from '@/api/index.js'

export default {
  name: 'SevencolorUserIndex',
  components: {
    areaMap
  },
  data () {
    return {
      baseId: 1,
      landData: null,
      landArea: null,
      landPlant: null,
      landNum: null,
      Species: null
    }
  },

  mounted () {
    this.baseId = this.$store.getters.userInfo.baseId
    this.getMapland()
    this.getLandAreaStatistics()
    this.getLandNumStatistics()
    this.getLandPlantStatistics()
    this.getSpeciesStatistics()
  },

  methods: {
    // 获取地块信息渲染
    async getMapland () {
      const res = await getMaplandApi(this.baseId)
      this.landData = res.data
      // console.log(this.landData, '父')
    },
    // 地面面积
    async getLandAreaStatistics () {
      const res = await getLandAreaStatisticsApi(this.baseId)
      this.landArea = res.data
    },
    // 地块数量
    async getLandNumStatistics () {
      const res = await getLandNumStatisticsApi(this.baseId)
      this.landNum = res.data
    },
    // 种植面积
    async getLandPlantStatistics () {
      const res = await getLandPlantStatisticsApi(this.baseId)
      this.landPlant = res.data
    },
    // 种植品类
    async getSpeciesStatistics () {
      const res = await getSpeciesStatisticsApi(this.baseId)
      this.Species = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
.topBox {
  height: 8.8542vw * 0.843;
  display: flex;
  margin-bottom: 1.4625vw * 0.843;
  justify-content: space-between;
  .text {
    font-size: 24px;
    margin-bottom: 0.5208vw;
    color: #fff;
  }
  @media screen and (max-width: 1500px) {
    .text {
      font-size: 20px;
    }
  }
  @media screen and (max-width: 1450px) {
    .text {
      font-size: 18px;
    }
  }
  //地块信息
  .landInfo1 {
    width: 18.8542vw;
    height: 8.8542vw * 0.843;
    flex-shrink: 0;
    background: url("../../assets/images/组 129.png") no-repeat;
    background-size: cover;
    border-radius: 15px;
    justify-content: space-between;
    padding: 1.5625vw * 0.843 0 0 1.5625vw;
  }
  //地块信息
  .landInfo2 {
    width: 18.8542vw;
    height: 8.8542vw * 0.843;
    flex-shrink: 0;
    background: url("../../assets/images/组 128.png") no-repeat;
    background-size: cover;
    border-radius: 15px;
    justify-content: space-between;
    padding: 1.5625vw * 0.843 0 0 1.5625vw;
  }
  // 地块种植
  .landBreed1 {
    width: 18.8542vw;
    height: 8.8542vw * 0.843;
    flex-shrink: 0;
    background: url("../../assets/images/组 127.png") no-repeat;
    background-size: cover;
    justify-content: space-between;
    border-radius: 15px;
    padding: 1.5625vw * 0.843 0 0 1.5625vw;
  }
  // 地块种植
  .landBreed2 {
    width: 18.8542vw;
    height: 8.8542vw * 0.843;
    flex-shrink: 0;
    background: url("../../assets/images/组 126.png") no-repeat;
    background-size: cover;
    justify-content: space-between;
    border-radius: 15px;
    padding: 1.5625vw * 0.843 0 0 1.5625vw;
  }
  @media screen and (max-width: 1450px) {
    .boxSize {
      height: 8.8542vw * 0.779;
    }
  }
  //通用
  .statisticsArea {
    height: 3.0729vw * 0.843;
    width: 18.4167vw;
    display: flex;
    .statisticsNum1 {
      height: 3.0729vw * 0.843;
      width: 10.4167vw;
      color: #fff;
      font-size: 42px;
      span {
        font-size: 20px;
      }
    }
    .statisticsNum2 {
      margin-top: 0.5208vw;
      height: 3.0729vw * 0.843;
      color: #fff;
      font-size: 1.5vw;
      span {
        font-size: 20px;
      }
    }
  }
  @media screen and (max-width: 1500px) {
    .statisticsArea {
      .statisticsNum1 {
        font-size: 30px;
        span {
          font-size: 18px;
        }
      }
      .statisticsNum2 {
        font-size: 1.3542vw;
        span {
          font-size: 18px;
        }
      }
    }
  }
}
@media screen and (max-width: 1450px) {
  .topBox {
    height: 8.8542vw * 0.779;
    margin-bottom: 1.4625vw * 0.779;
  }
}

.map {
  width: 79.2083vw;
}
.areaMap {
  width: 80.2083vw;
}
</style>
